<template>
  <div>
    <el-card>
      <div ref="echarts1" style="height: 380px"></div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div ref="echarts2" style="height: 380px"></div>
    </el-card>
    <div class="graph" style="margin-top: 20px">
      <el-card>
        <div ref="echarts3" style="height: 380px"></div>
      </el-card>
      <el-card>
        <div ref="echarts4" style="height: 380px"></div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      seven_PhCh_data: {},
    };
  },
  created() {
    this.getSevenPhChData("PhCh");
  },
  // mounted() {
  //   this.drawLineChart1();
  // },
  watch: {
    seven_PhCh_data() {
      this.$nextTick(() => {
        //此时就可以获取到在created赋值后的seven_PhCh_data了
        this.drawLineChart1();
        this.drawLineChart2();
        this.drawLineChart3();
        this.drawLineChart4();
      });
    },
  },
  computed: {},
  methods: {
    // 获取最近七天的检测数据
    getSevenPhChData(category) {
      this.$axios({
        url: "getSevenData",
        params: {
          monitor_point_code: this.$store.state.userInfo.monitor_point_code,
          category,
        },
      })
        .then((res) => {
          this.seven_PhCh_data = res.data;
        })
        .catch((err) => err);
    },
    // echarts 配置对象
    getPhChConfigObj(showX, line_title) {
      let series = [];
      for (let i in showX) {
        let dData = [];
        let x_key = this.common.getObjectKey(this.constant.PhCh, showX[i]);
        for (let j in this.seven_PhCh_data) {
          dData.push(this.seven_PhCh_data[j][x_key]);
        }
        series.push({
          name: showX[i],
          type: "line",
          data: dData,
        });
      }
      const option = {
        title: {
          text: line_title,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: showX,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.common.getSevenDays(),
        },
        yAxis: {
          type: "value",
        },
        series,
      };
      return option;
    },
    // 绘制第一个折线图
    drawLineChart1() {
      // 基于准备好的dom，初始化echarts实例
      const echarts1 = this.$echarts.init(this.$refs.echarts1);
      var echarts1Option = {};
      const showX = ["溶解氧", "PH", "生化需氧量", "化学需氧量"];
      const title = "理化指标 1-10";
      echarts1Option = this.getPhChConfigObj(showX, title);
      echarts1.setOption(echarts1Option);
    },
    // 绘制第二个折线图
    drawLineChart2() {
      // 基于准备好的dom，初始化echarts实例
      const echarts2 = this.$echarts.init(this.$refs.echarts2);
      var echarts2Option = {};
      const showX = ["石油类", "硫化物", "无机氮"];
      const title = "理化指标 0.01-0.5";
      echarts2Option = this.getPhChConfigObj(showX, title);
      echarts2.setOption(echarts2Option);
    },
    drawLineChart3() {
      // 基于准备好的dom，初始化echarts实例
      const echarts3 = this.$echarts.init(this.$refs.echarts3);
      var echarts3Option = {};
      const showX = ["挥发酚", "氰化物"];
      const title = "理化指标 0.001-0.2";
      echarts3Option = this.getPhChConfigObj(showX, title);
      echarts3.setOption(echarts3Option);
    },
    drawLineChart4() {
      // 基于准备好的dom，初始化echarts实例
      const echarts4 = this.$echarts.init(this.$refs.echarts4);
      var echarts4Option = {};
      const showX = ["水温", "悬浮物"];
      const title = "理化指标 1-150";
      echarts4Option = this.getPhChConfigObj(showX, title);
      echarts4.setOption(echarts4Option);
    },
  },
};
</script>
<style lang='less' scoped>
.graph {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .el-card {
    width: 49%;
  }
}
</style>
